<template>
  <el-form label-position="left" size="mini" label-width="80px" class="base-attrbute">
    <el-form-item label="禁用">
      <el-radio-group v-model="value.disabled">
        <el-radio :label="true">禁用</el-radio>
        <el-radio :label="false">非禁用</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="固定时间点">
      <el-radio-group v-model="value.fixed">
        <el-radio :label="true">开启</el-radio>
        <el-radio :label="false">关闭</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="时间尺寸：">
      <el-select v-model="value.size" placeholder="请设置时间尺寸">
        <el-option label="大" value="medium"></el-option>
        <el-option label="中" value="small"></el-option>
        <el-option label="小" value="mini"></el-option>
      </el-select>
    </el-form-item>
    <template v-if="value.fixed">
      <el-form-item label="起始时间：">
        <el-input v-model="value.start" placeholder="输入格式：00：00"></el-input>
      </el-form-item>
      <el-form-item label="结束时间：">
        <el-input v-model="value.end" placeholder="输入格式：00：00"></el-input>
      </el-form-item>
      <el-form-item label="步长：">
        <el-input v-model="value.step" placeholder="输入格式：00：00"></el-input>
      </el-form-item>
    </template>
    <template v-if="!value.fixed">
      <el-form-item label="时间范围">
        <el-radio-group v-model="value.range">
          <el-radio :label="true">开启</el-radio>
          <el-radio :label="false">关闭</el-radio>
        </el-radio-group>
      </el-form-item>
      <template v-if="value.range">
        <el-form-item label="分隔符">
          <el-input v-model="value.separator" placeholder="请输入分隔符号"></el-input>
        </el-form-item>
        <el-form-item label="开始提示：">
          <el-input v-model="value.startPlaceholder" placeholder="请选择开始时间"></el-input>
        </el-form-item>
        <el-form-item label="结束提示：">
          <el-input v-model="value.endPlaceholder" placeholder="请选择结束时间"></el-input>
        </el-form-item>
      </template>
    </template>
    <template v-if="!value.range">
      <el-form-item label="占位提示：">
        <el-input v-model="value.placeholder" placeholder="请选择时间"></el-input>
      </el-form-item>
    </template>
  </el-form>
</template>
<script type="text/javascript">
export default {
  created() {

  },
  props: {
    value: [Array, Object]
  },
  components: {
    //Logo
  },
  data() {
    return {

    }
  },
  /**
   * 计算属性
   * @type {Object}
   */
  computed: {

  },
  /**
   * 数据监听
   * @type {Object}
   */
  watch: {
    demo(v) {
      console.log("数据监听", v);
    }
  },
  /**
   * 页面加载执行
   * @return {[type]} [description]
   */
  mounted() {

  },
  /**
   * 页面方法
   * @type {Object}
   */
  methods: {

  }
}

</script>
<style type="text/css" lang="scss">
.base-attrbute {
  padding: 10px;

  .el-form-item--mini.el-form-item,
  .el-form-item--small.el-form-item {
    margin-bottom: 10px;
  }

  .el-form--label-top .el-form-item__label {
    float: none;
    display: inline-block;
    text-align: left;
    padding: 0;
  }

  .el-form-item__label,
  .el-form-item__content {
    font-size: 12px !important;

  }

}

</style>
